<template>
	<view class="flex flex-vertical wait-box"  v-if="(list.tui_pend && list.tui_pend.length > 0)">
		<view class="wait-item flex flex-vertical">
			<view class="wait-title">待付信息</view>
			<!--
				退款缺少弹窗
				弹框内容从 item.popup 读取
			 -->
			<view class="flex flex-vertical item " v-for="item in list.tui_pend" >
				<view class="flex flex-horizontal" @click="itemClick(item)">
					<view class="item-money">¥{{item.money}}</view>
					<view class="flex flex-horizontal flex-1">
						<view class="flex flex-vertical" style="width: 160px;">
							<text>{{item.isfinshed&&item.type!='2'&&userInfo.is_lawyer=='1'?item.name:item.new_name}}</text>
							<text>{{item.new_time}}</text>
						</view>
						<image v-if="item.type == 8 || item.type == 3 || item.type == 7 || item.type == 2" class="image-r" src="@/static/img/right.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="flex flex-horizontal flex-center-v btn-back" :class="item.type!='2'?'flex-center':''">
					<view class="comfir-btn flex flex-center flex-1" :style="{'max-width':item.type!='2'?'100%':'50%'}"
					@click="
						current_item = item;
						$refs.popupWantPay.open();
					"
					>

            <uni-countdown
                v-if="item.isfinshed&&item.type!='2'&&userInfo.is_lawyer=='1'"
                :show-day="false"
                :hour="item.lvShiTime.hour"
                :minute="item.lvShiTime.minute"
                :second="item.lvShiTime.second"
                color="#f00"
                splitorColor="#f00"
                backgroundColor="#FFC801"
                @timeup="timeup($event,index,item)"
            ></uni-countdown>
            我要付款
          </view>
					<view class="comfir-btn flex flex-center flex-1"
					@click.stop="
						current_item = item;
						$refs.popupReturnReason.open();
					"
          v-if="item.type=='2'"
					>退回申请</view>
				</view>
			</view>
			<!-- 退回投资费用 -->
			<!-- <view class="flex flex-vertical item " v-for="item in list.pend_tui_apply" >
				<view class="flex flex-horizontal" @click="itemClick(item)">
					<view class="item-money">¥{{item.money}}</view>
					<view class="flex flex-horizontal flex-1">
						<view class="flex flex-vertical" style="width: 160px;">
							<text>{{item.new_name}}</text>
							<text>{{item.new_time}}</text>
						</view>
						<image class="image-r" src="@/static/img/right.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="flex flex-horizontal flex-center-v btn-back">
					<view class="comfir-btn flex flex-center flex-1"
					@click="
						current_item = item;
						$refs.popupWantPay.open();
					"
					>我要付款</view>
					<view class="comfir-btn flex flex-center flex-1"
					@click.stop="
						current_item = item;
						$refs.popupReturnReason.open();
					"
					>退回申请</view>
				</view>
			</view> -->

		</view>
		<!-- 取消收款弹出层 -->
		<uni-popup ref="popupCancelReceive" type="dialog">
			<uni-popup-dialog
				type="info"
				okTxt="是"
				cancleTxt="否"
				content="确认取消收款"			:before-close="true"
				@confirm="
					closePop('popupCancelReceive');
					cancelReceiveMoney();
				"
				@close="closePop('popupCancelReceive')"
			></uni-popup-dialog>
		</uni-popup>
		<!-- 退款申请弹出层 -->
		<uni-popup ref="popupReturnApplyFee" type="dialog">
			<uni-popup-dialog
				type="info"
				okTxt="是"
				cancleTxt="否"
				content="退回申请"
				:before-close="true"
				@confirm="
					closePop('popupReturnApplyFee');
					returnApplyFee(0);
				"
				@close="closePop('popupReturnApplyFee')"
			></uni-popup-dialog>
		</uni-popup>
		<!-- 申请弹出层 -->
		<uni-popup ref="popupReturnApplyFee" type="dialog">
			<uni-popup-dialog
				type="info"
				okTxt="是"
				cancleTxt="否"
				content="退回申请"
				:before-close="true"
				@confirm="
					closePop('popupReturnApplyFee');
					returnApplyFee(0);
				"
				@close="closePop('popupReturnApplyFee')"
			></uni-popup-dialog>
		</uni-popup>
		<!-- 支付弹出层 -->
		<uni-popup ref="popupWantPay">
			<service-popup-pay title="我要退款" btnText="我要退款" @closePop="closePop('popupWantPay')" @confirmPay="confirmPay">
				<template slot="payOption">
					<view class="od-item" style="align-items: center">
						<view class="item-tip">退款金额</view>
						<view class="item-right">
							<view class="item-txt red">￥{{ current_item.money }}</view>
						</view>
					</view>
					<view class="od-item marginbottom20">
						<view class="item-tip" style="padding-top: 12rpx;">退款理由</view>
						<view class="item-right">
							<view class="item-txt">{{ current_item.origin }}</view>
						</view>
					</view>
				</template>
			</service-popup-pay>
		</uni-popup>
		<!-- 退款退回理由 -->
		<uni-popup ref="popupReturnReason" type="dialog">
			<uni-popup-dialog-reason
				type="info"
				title=""
				okTxt="确认"
				cancleTxt="取消"
				:showClose="false"
				:before-close="true"
				@confirm="
					backApply();
				"
				@close="closePop('popupReturnReason')"
			>
				<view class="return-reason-box">
					<view class="od-item">
						<view class="item-tip"><text>退回理由</text><text class="red" style="margin-top: 6rpx;">*</text></view>
					</view>
					<view class="od-item">
						<textarea class="textarea-border textarea-height" placeholder="请输入" placeholder-class="placeholder" v-model="applyReason" />
					</view>
				</view>
			</uni-popup-dialog-reason>
		</uni-popup>
		<!-- 退回投资费用 理由 -->
		<!-- 申请弹出层 -->
		<uni-popup ref="popupReturnApplyMoney" type="dialog">
			<uni-popup-dialog
				type="info"
				okTxt="是"
				cancleTxt="否"
				content="退回申请"
				:before-close="true"
				@confirm="
					closePop('popupReturnApplyMoney');
					cancelReceiveMoney2();
				"
				@close="closePop('popupReturnApplyMoney')"
			></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	props: ['info','list'],
	data() {
		return {
			current_item:{},
			applyReason:'',
		};
	},
	created() {
		// 安卓
		window.payOk = this.payOk;
	},
  computed: {
    ...mapGetters(['userInfo']),
  },
	methods: {
		itemClick(item) {
			this.$emit('popupShow',item)
		},
    timeup(e,index,item){
      item.isfinshed = false;
      console.log("==========index",index)
      this.$emit('clearTime',index)
    },
		async cancelReceiveMoney() {
			let formData = {
				id: this.current_item.id,
				token: uni.getStorageSync('token')
			};
			let res = await this.$api('index.lawyer_cancel_collect', formData);
			if (res.code == 1) {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
				this.$emit('init');
			}
		},
		async confirmPay(payMethod) {
			console.log('支付调用');
			let pay_type;
			let order_id;
			if (this.current_item.fen == 6) {//fen == 6付款给律师
				pay_type = 2;
				order_id = this.current_item.id;
			} else {//fen == 2 二期；fen == 3 三期；fen == 4 先用后付；fen == 5 律师点我要收款；
				pay_type = 3;
				order_id = this.current_item.id;
			}
			let formDataPay = {
				order_id: order_id,
				payMethod: payMethod,
				fen: this.current_item.fen,
				pay_type: pay_type
			};

			let resPay = await this.$pay(formDataPay);
			console.log(resPay);
			console.log('X1');
			if (resPay == 1) {
				this.$refs.popupWantPay.close();
				console.log('X2');
				this.$emit('init');
			}
		},
		payOk(res) {
			// 安卓0 支付成功，-1 支付失败， -2取消支付
			if (res == '0') {
				this.$refs.popupWantPay.close();
				this.$emit('init');
			}
		},
		async returnApplyFee(isreduction) {
			let formData = {
				id: this.current_item.id,
				token: uni.getStorageSync('token'),
				isreduction: isreduction
			};
			let res = await this.$api('latefee.setreply', formData);
			if (res.code == 1) {
				this.$emit('init');
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
			}
		},
		async backApply() {
		  if(!this.applyReason){
        uni.showToast({
          title:'请填写退回理由',
          icon:'none',
          duration:1000
        })
        return;
      }
			let formData = {
				id: this.current_item.id,
				token: uni.getStorageSync('token'),
				origin: this.applyReason,
				type:2//cancel_money接口 type:1申请人主动取消，type:2被申请人退回
			};
			let res = await this.$api('index.cancel_money', formData);
			if (res.code == 1) {
        this.$refs.popupReturnReason.close();
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
				this.$emit('init');
			}
		},
		async cancelReceiveMoney2() {
			let formData = {
				id: this.current_item.id,
				token: uni.getStorageSync('token'),
			};
			let res = await this.$api('index.cancel_apply', formData);
			if (res.code == 1) {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
				this.$emit('init');
			}
		},
	}
};
</script>

<style lang="scss">
	.btn-back {
		padding: 10px 0;
	}

	.image-r {
		width: 9px;
		height: 14px;
		margin-left: 35px;
	}
	.item {
		margin-top: 12px;
		margin-bottom: 12px;
	}
	.back-box::after{
		content: '＊';
		color: red
	}
	.od-item{
	  display: flex;
	  display:-webkit-flex;
	  .item-tip {
	    font-size: 26rpx;
	    width: 140rpx;
	    margin-right:20rpx;
	    display: flex;
	  }
	}
</style>

<style lang="scss"></style>
